<template>
  <div class="emoji">
    <div class="img-item" v-for="(item, index) in emojis" :key="index" >
      <img :src="item" @click="itemClick" >
    </div>
  </div>
</template>

<script>
import emojis from 'common/emoji.js'
export default {
  data() {
    return {
      emojis,
      text:null
    }
  },
  methods:{
    itemClick(e){

      this.$emit('sendEmoji',e.target)
    }

  },
  created(){




  }
}
</script>

<style scoped>
.emoji{
  height: 100%;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
}
.img-item{
  height: 40px;
  width: 40px;
  padding: 3px;
  cursor: pointer;
  border-radius: 3px;

}
.img-item:hover{
  background-color: #f1f1f1;
  
}
.img-item img{
  width: 100%;
  height: 100%;
}
</style>